<template>
	<view>
		<view class="content-box">
			<pub-head headerName="gamewt_rank_list" :headerConfig="headerConfig"></pub-head>

			<view class="header">
				<image style="width: 100%;" src="../static/game/bg_battle_royal_rank_medal.png" mode="widthFix">
				</image>
				<!-- <view class="txt">奖励免杀手伤害皮肤，最高免伤{{ wangLastWeek.one || 0 }}%</view> -->
				<!-- <view class="rank rank_1">
					<view class="p_1">免伤{{ wangLastWeek.two || 0 }}%</view>
					<view class="p_2">上周榜第2-5名</view>
				</view>
				<view class="rank rank_2">
					<view class="p_1">免伤{{ wangLastWeek.one || 0 }}%</view>
					<view class="p_2">上周榜第1名</view>
				</view>
				<view class="rank rank_3">
					<view class="p_1">免伤{{ wangLastWeek.three || 0 }}%</view>
					<view class="p_2">上周榜第6-10名</view>
				</view> -->
			</view>

			<view class="rank-list">
				<view class="r-tabs">
					<view @click="checkoutTab(1)" class="item" :class="cur_tab == 1 ? 'active' : ''">本周榜</view>
					<view @click="checkoutTab(2)" class="item" :class="cur_tab == 2 ? 'active' : ''">上周榜 
						<!-- <span class="span">权益</span> -->
					</view>
				</view>

				<view class="list">
					<view class="flag" :class="cur_tab == 1 ? 'left-flag' : 'right-flag'"></view>
					<view class="c-header">
						<text>排名/用户</text>
						<text>奖励旺票数</text>
					</view>
					<view class="c-item" v-for="(item, index) in rankList" :key="index">
						<view class="left">
							<view class="number" :class="index == 0 ? 'number1' : ''">{{ index + 1 }}</view>
							<image class="avatar" :src="item.avatarUrl || '../static/login/wx2.png'" mode=""></image>
							<view class="name">{{ item.nickName }}</view>
						</view>
						<view class="right">{{ item.amount || 0 }}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="c-bottom-item">
			<view class="left">
				<view class="rank" v-if="userRank.rank == 0">未上榜</view>
				<view class="rank number1" v-else>{{ userRank.rank }}</view>
				<image class="avatar" :src="userRank.avatarUrl || '../static/login/wx2.png'" mode=""></image>
				<view class="name">自己</view>
			</view>
			<view class="right">
				<text>{{ userRank.amount }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import {
	requestGet,
	requestPost
} from '../common/util.js'
export default {
	components: {},
	data() {
		return {
			headerConfig: {
				title: '排行榜',//标题栏内容
				left_type: 3,
				header_color: 'rgba(0,0,0,0)'
			},

			cur_tab: 1,
			rankList: [],
			loading: false,
			userRank: {
				amount: 0,
				avatarUrl: '',
				nickName: '',
				rank: 0
			},

			wangLastWeek: {
				one: '',
				two: '',
				three: '',
			}

		};
	},
	onLoad() {
		this.getRankList();
		// this.getConfig();
	},
	methods: {
		checkoutTab(index) {
			this.cur_tab = index
			this.rankList = []
			this.getRankList()
		},
		async getConfig() {
			let configRes = await getApp().getConfigList();
			// console.log(configRes);
			this.wangLastWeek = {
				one: configRes.wangLastWeekOne * 100,
				two: configRes.wangLastWeekTwo * 100,
				three: configRes.wangLastWeekThree * 100,
			}
		},
		getRankList() {
			this.loading = true;
			requestGet(this.$comFun.baseURL + 'zwt/api/game/rankList', {
				type: this.cur_tab == 1 ? 'week' : 'last_week'
			}, true, false).then(res => {
				this.loading = false;
				// console.log(res)
				if (res.code == 200) {
					this.rankList = res.result.rankList
					this.userRank = res.result.userRank
				}
			})

		}
	}
}
</script>

<style lang="scss" scoped>
.content-box {
	// width: 100vw;
	height: 100vh;
	background: url('../static/game/bg_battle_royal_rank_stone_bottom.png') no-repeat;
	background-size: 100% auto;
	background-attachment: fixed;

	overflow: auto;

}

.header {
	// position: absolute;top: 0;

	position: relative;
	width: 100%;
	color: #fff;
	font-size: 26rpx;

	.txt {
		color: #a1a5a8;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		position: absolute;
		top: 36vw;
		left: 0;
		width: 100vw;
	}

	.rank {
		width: 26vw;

		.p_1 {
			line-height: 5vw;
			color: #fae2ca;
			font-size: 24rpx;
			width: 116rpx;
			text-align: center;
			margin: 0 auto;
		}

		.p_2 {
			color: #797478;
			font-size: 24rpx;
			line-height: 38rpx;
			margin-top: 10rpx;
			text-align: center;
		}
	}

	.rank_1 {
		position: absolute;
		left: 8vw;
		bottom: 16vw;
	}


	.rank_2 {
		position: absolute;
		left: 37vw;
		bottom: 20vw;
	}

	.rank_3 {
		position: absolute;
		right: 8vw;
		bottom: 14vw;
	}


	// .rank1 {
	// 	position: absolute;
	// 	left: 316rpx;
	// 	bottom: 196rpx;
	// 	width: 116rpx;
	// 	height: 34rpx;
	// 	text-align: center;
	// 	overflow: hidden;
	// }

	// .rank2 {
	// 	position: absolute;
	// 	left: 96rpx;
	// 	bottom: 166rpx;
	// 	width: 116rpx;
	// 	height: 34rpx;
	// 	text-align: center;
	// 	overflow: hidden;
	// }

	// .rank3 {
	// 	position: absolute;
	// 	right: 100rpx;
	// 	bottom: 152rpx;
	// 	width: 116rpx;
	// 	height: 34rpx;
	// 	text-align: center;
	// 	overflow: hidden;
	// }
}

.rank-list {
	// margin-top: 600rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	padding-bottom: 170rpx;

	.r-tabs {
		// width: 100%;
		background-color: #21242b;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
		box-sizing: border-box;

		.item {
			// padding: 20rpx 120rpx;

			width: 50%;
			height: 80rpx;

			border-radius: 60rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 500;
			position: relative;

			.span {
				width: 80rpx;
				height: 40rpx;
				color: #2d0704;
				font-size: 24rpx;
				line-height: 40rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				position: absolute;
				top: 0;
				right: calc(15px + 1vw);
				text-align: center;
				background-image: linear-gradient(to right, #f7e5cf, #fac39a);
			}
		}

		.active {
			background-color: #0b0c10;
		}
	}

	.list {
		position: relative;
		margin-top: 40rpx;
		background-color: #FECD68;
		border-radius: 60rpx;
		padding: 0 30rpx;
		min-height: 300rpx;
		width: 100%;
		box-sizing: border-box;

		.left-flag {
			left: 154rpx !important;
		}

		.right-flag {
			right: 154rpx !important;
		}

		.flag {
			position: absolute;
			top: -16rpx;
			width: 0;
			height: 0;
			border-bottom: 16rpx solid #FECD68;
			border-right: 16rpx solid transparent;
			border-left: 16rpx solid transparent;
		}

		.c-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 1px solid #E4A437;
			color: #778198;
			font-size: 24rpx;
		}

		.c-item {
			height: 120rpx;
			border-bottom: 1px solid #E4A437;
			color: #fff;

			display: flex;
			align-items: center;
			justify-content: space-between;

			&:last-child {
				border-bottom: none;
			}

			.left {
				display: flex;
				align-items: center;

				.number1 {
					color: #ffec87 !important;
				}

				.number {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 38rpx;
					font-weight: bold;
					font-style: italic;
					color: #758db5;
				}

				.avatar {
					margin-left: 20rpx;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}

				.name {
					font-size: 28rpx;
					font-weight: 500;
					margin-left: 20rpx;
					width: 250rpx;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.right {
				font-size: 32rpx;
				font-weight: bold;
			}
		}


	}
}

.c-bottom-item {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 130rpx;
	background-color: #B55E1A;
	border-radius: 50rpx 50rpx 0 0;

	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;


	.left {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 220rpx;
		// background-color: pink;
		font-size: 24rpx;

		.rank {
			color: #999;
		}

		.number1 {
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
			// font-style: italic;
			color: #ffec87 !important;
		}

		.avatar {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}

		.name {
			color: #fff;
			font-weight: 500;
		}

	}

	.right {
		margin-right: 20rpx;
		font-size: 30rpx;
		color: #fff;
		font-weight: bold;
	}

}
</style>